<template>
	<view class="section">
		<view class="nav-left">
			<scroll-view scroll-y class="nav-left-scroll">
				<view class="nav-left-item" v-for="(item,index) in categoryList" @click="categoryClickMain(item,index)"
					:key="index"
					:style="index==categoryActive?'color:'+activeTextColor+'; border-left: 4px solid #3DA77F; background-color:'+activeBackgroundColor:''">
					{{ item[label] }}
				</view>
			</scroll-view>
		</view>
		<view class="nav-right">
			<scroll-view scroll-y class="nav-right-scroll" :scroll-top="scrollTop" @scroll="scroll">
				<template v-if="categoryListObj.yyghYyksList && categoryListObj.yyghYyksList.length>0">
					<view class="description">普通挂号</view>
					<!-- <view class="line1"></view> -->
					<view class="description-detail">
						医保和自费均可使用。医保用户请用医保卡或医保电子凭证在自助机取号
					</view>
					<view class="nav-right-item" v-for="(item,index) in categoryListObj.yyghYyksList"
						:key="Math.floor(Math.random()*1000000000)" @click="categoryClickSub(item)">
						<view class="item-label">{{ item[label1] }}</view>
					</view>
				</template>


				<template v-if="categoryListObj.yyghYyksList2 && categoryListObj.yyghYyksList2.length>0">
					<view class="description">特需挂号</view>
					<view class="description-detail">
						医保和自费用户均可使用。商业保险客户请电话预约(69079666)或者现场预约
					</view>
					<view class="nav-right-item" v-for="(item,index2) in categoryListObj.yyghYyksList2"
						:key="Math.floor(Math.random()*1000000000)" @click="categoryClickSub(item)">
						<view class="item-label">{{ item[label1] }}</view>
					</view>
				</template>

				<template v-if="categoryListObj.yyghYyksList3 && categoryListObj.yyghYyksList3.length>0">
					<view class="description">VIP挂号</view>
					<view class="description-detail">
						商业保险客户请电话预约(69079666)或者现场预约。预约时间:08:00-20:00
					</view>
					<view class="nav-right-item" v-for="(item,index) in categoryListObj.yyghYyksList3"
						:key="Math.floor(Math.random()*1000000000)" @click="categoryClickSub(item)">
						<view class="item-label">{{ item[label1] }}</view>
					</view>
				</template>

				<view class="empty" v-if="subNoData">暂无排班数据</view>
			</scroll-view>
			
		</view>
	</view>
</template>

<script>
	// import deptList from '@/pages/test-data.js'

	// export default {
	// 	name: "departmentList",
	// 	data() {
	// 		return {
	// 			scrollHeight: 0,
	// 			categoryActive: 0,
	// 			categoryList: [], //主分类List
	// 			categoryListObj: {
	// 				yyghYyksList:[],
	// 				yyghYyksList2:[],
	// 				yyghYyksList3:[]
	// 			},
	// 			// topHeight: 0,
	// 			scrollTop: 0,
	// 			old: {
	// 				scrollTop: 0
	// 			}
	// 		}
	// 	},
	// 	props: {
	// 		//主分类激活索引
	// 		defaultActive: {
	// 			type: Number,
	// 			default: 0
	// 		},
	// 		activeTextColor: {
	// 			type: String,
	// 			default: '#6A6969'
	// 		},
	// 		activeBackgroundColor: {
	// 			type: String,
	// 			default: '#fff'
	// 		},
	// 		label: {
	// 			type: String,
	// 			default: 'deptName'
	// 		},
	// 		label1: {
	// 			type: String,
	// 			default: 'ksmc'
	// 		},
	// 	},

	// 	methods: {
	// 		getRoundKey() {
	// 			return Math.floor(Math.random() * 1000000000)
	// 		},
	// 		scroll: function(e) {
	// 			this.old.scrollTop = e.detail.scrollTop
	// 		},
	// 		categoryClickMain(item, index) {
	// 			console.log(`======categoryClickMain(category, index) {=======>`, item, index)
	// 			this.categoryActive = index;
	// 			this.categoryListObj = item
	// 			this.scrollTop = this.old.scrollTop
	// 			this.$nextTick(function() {
	// 				this.scrollTop = 0
	// 			});
	// 		},
	// 		categoryClickSub(category) {
	// 			this.$emit('categorySubClick', category)
	// 		}
	// 	},
	// 	mounted() {
	// 		this.categoryActive = this.defaultActive
	// 		this.categoryList = deptList
	// 		console.log("deptList", deptList);
	// 		this.categoryListObj = deptList ? deptList[0] : {}

	// 		// uni.getSystemInfo({
	// 		// 	success: res => {
	// 		// 		console.log("res.statusBarHeight", res)
	// 		// 		this.topHeight = res.statusBarHeight + res.windowTop;
	// 		// 	}
	// 		// });
	// 	},
	// 	computed: {
	// 		subNoData() {
	// 			return this.categoryListObj.yyghYyksList.length === 0
	// 			    && this.categoryListObj.yyghYyksList2.length === 0
	// 			    && this.categoryListObj.yyghYyksList3.length === 0
	// 		}
	// 	},
	// 	watch: {
	// 		//选项卡切换时候, 主菜单置为0
	// 		// tabIndexFrom(a, b) {
	// 		// 	console.log(`====tabIndexFrom=========>`, a, b)
	// 		// 	this.categoryActive = this.defaultActive
	// 		// }
	// 	},
	// }
</script>

<style scoped lang="scss">
	.section {
		width: 100%;
		display: flex;

		.nav-left {
			width: 40%;
			// height: calc(100vh - 50px);
			background: #F7F6F6;

			.nav-left-scroll {
				height: calc(100vh - 50px);

				.nav-left-item {
					height: 50px;
					font-size: 16px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #666;
				}
			}

		}

		.nav-right {
			width: 60%;
			padding: 0 15px;

			.nav-right-scroll {
				height: calc(100vh - 50px);

				.description {
					padding: 10px;
					border-bottom: 2px solid #3DA77F;
					font-weight: bold;
					color: #3DA77F;
				}
				
				.description-detail{
					font-size: 14px;
					color: #3DA77F;
					padding: 5px 0;
					
				}
				
				.line1{
					border-bottom: 2px solid #3DA77F;
				}

				.nav-right-item {
					width: 100%;
					height: 40px;
					float: left;
					text-align: left;
					padding: 5px;
					font-size: 16px;
					line-height: 40px;
					color: #333;

					.item-label {
						height: 40px;
						line-height: 40px;
						// padding-left: 15px;
					}
				}
			}
		}
	}
</style>